<template>
    <div style="text-align: center; margin-bottom: 20px;">
        <h1 style="font-size: 28px; font-weight: bold;">食谱发布管理</h1>
    </div>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" align="center" width="50" />
        <el-table-column prop="title" label="标题" align="center" width="60" />
        <el-table-column label="图片" align="center">
            <template #default="scope">
                <el-image style="width: 90px; height: 70px" :src="`http://localhost/storage/${scope.row.image}`" />
            </template>
        </el-table-column>
        <el-table-column prop="category_name" label="类型" align="center" />
        <el-table-column label="状态" align="center">
            <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="create_time" label="发布时间" align="center"  />
        <el-table-column label="操作" align="center" width="150">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div style="display: flex; justify-content: center; margin-top: 20px;">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
            :current-page="currentPage" @current-change="handlePageChange" />
    </div>


    <!-- 编辑对话框 -->
    <el-dialog v-model="dialogVisible" title="编辑食谱" width="70%">
        <el-form :model="editForm" label-width="100px">
            <el-form-item label="ID">
                <el-input v-model="editForm.id" disabled />
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="editForm.title" />
            </el-form-item>
            <el-form-item label="类型">
                <el-input v-model="editForm.category_name" />
            </el-form-item>
            <el-form-item label="摘要">
                <el-input v-model="editForm.summary" />
            </el-form-item>
            <el-form-item label="健康功效">
                <el-input v-model="editForm.effect" />
            </el-form-item>
            <el-form-item label="配料表">
                <el-input v-model="editForm.ingredients" type="textarea" :rows="4" />
            </el-form-item>
            <el-form-item label="内容">
                <el-input v-model="editForm.content" type="textarea" :rows="4" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveEdit">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { getrecipe, deleterecipe, editrecipe } from '~/api/user';
import { useCookies } from '@vueuse/integrations/useCookies';
import { ElNotification } from 'element-plus';

const tableData = ref([]);
const cookies = useCookies();
const user_id = ref(cookies.get('use_id'));
const dialogVisible = ref(false);
const editForm = ref({});
// 分页相关的数据
const total = ref(0); // 总条数
const pageSize = ref(5); // 每页显示条数
const currentPage = ref(1); // 当前页码
const fetchData = () => {
    getrecipe(user_id.value, currentPage.value, pageSize.value).then(res => {
        tableData.value = res.recipelist
        total.value = res.total;
    });
};
fetchData();
// 分页改变时触发的方法
const handlePageChange = (newPage) => {
    currentPage.value = newPage;
    fetchData();
};
const getStatusType = (status) => {
    switch (status) {
        case '审核中':
            return 'primary';
        case '审核通过':
            return 'success';
        case '审核不通过':
            return 'danger';
        default:
            return 'info'; // 或者其他默认类型
    }
};
const handleEdit = (id) => {
    const recipeItem = tableData.value.find(item => item.id === id);
    if (recipeItem) {
        editForm.value = { ...recipeItem }; // 复制当前行的数据
        dialogVisible.value = true;
    }
};
const saveEdit = () => {
    console.log('保存', editForm.value);
    editrecipe(editForm.value).then(res => {
        ElNotification({
            message: "食谱修改成功",
            type: 'success',
            duration: 3000
        });
        dialogVisible.value = false;
        fetchData();
    }).catch(err => {
        ElNotification({
            message: "食谱修改失败",
            type: 'error',
            duration: 3000
        });
    })
};
const handleDelete = (id) => {
    console.log('删除', id);
    deleterecipe({ id }).then(res => {
        ElNotification({
            message: "食谱删除成功",
            type: 'success',
            duration: 3000
        });
        fetchData();
    }).catch(err => {
        ElNotification({
            message: "食谱删除失败",
            type: 'error',
            duration: 3000
        });
    });
};
</script>